<template>
	<view class="lives-list-page" :style="viewStyle">
		<c-layout>
			<c-navigation-bar slot="head" @backEvent="goBack" :title="$t('media.liveStreamList')"></c-navigation-bar>
			<view style="padding: 0 40rpx;" class="lives-list">
				<template v-if="livesList.list.length">
					<view class="item" :id="'item'+''+index" :ref="'item'+''+index"
						v-for="(item,index) in livesList.list" :key="index">
						<lives-box :isCurrent="cardIndex == index" :windowHeight="winHeight" :key="index"
							:data="item"></lives-box>
					</view>
					<view class="livse-footer" :style="{height:footBar+'px'}">
					</view>
				</template>
				<view v-else class="scroll-view" style="align-items: center;justify-content: center">
					<text style="color: #ccc;font-size: 40rpx;">{{uni.$t('media.noLive')}}</text>
				</view>
			</view>
		</c-layout>
		<!-- <view class="lives-header" :style="{marginTop:statusbarHeight+'px'}"
			style="height: 140rpx;background-color: #fff;">
			<view class="back-icon" @click="uni.publicJS.backOption()">
				<image class="back-img" :src="require('@/static/images/user/left-1.png')"></image>
			</view>
			<view class="title">
				<text style="text-align: center;">{{uni.$t('media.liveStreamList')}}</text>
			</view>
			<view class="right-icon">

			</view>
		</view>
		<scroll-view class="scroll-view" scroll-y="true" @scroll="scroll">

		</scroll-view> -->

	</view>
</template>

<script>
	import livesBox from './components/livesBox.vue'
	export default {
		components: {
			livesBox
		},
		data() {
			return {
				livesList: {
					data: {
						"total": "",
						"count": "",
						"pageSize": 20,
						"pageNum": 1,
						"startTime": null,
						"endTime": null,
						"id": null,
						"name": null,
						"startDate": null,
						"endDate": null,
						"status": null,
						"liveStatus": '2'
					},
					list: [],
					isGet: false
				},
				lives: [],
				uni,
				statusbarHeight: 0,
				footBar: 0,
				cardIndex: 0,
				winWidth: 0,
				winHeight: 0,
				livesBoxHeight: 0,
				timer:null,
			}
		},
		computed: {
			queryParams() {
				return {
					pageNum: this.livesList.data.pageNum,
					size: this.livesList.data.pageSize,
					offsetBottom: 10,
					contentHeight: 0,
					safeArea: true,
					auto: false,
					emptyText: uni.$t('system.NoRecord'),
					noMoreText: uni.$t('system.NoFurtherDataAvailable'),
					showPullDown: false,
					loadDisabled: false,
				}
			},
			currentId() {
				return this.livesList.list[this.cardIndex].id + '' + this.cardIndex
			},
		},
		onShow() {
			this.getAnchorLiveListAjax()
			this.timer=setInterval(()=>{
				this.getAnchorLiveListAjax()
			},15000)
			
		},
		onLoad() {
			
			uni.getSystemInfo({
				success: (res) => {
					console.log(res);
					this.winWidth = res.windowWidth;
					this.winHeight = res.windowHeight;
					this.statusbarHeight = res.statusBarHeight;
					this.footBar = res.screenHeight - res.safeArea.bottom
				}
			})
		},
		computed: {
			viewStyle() {
				return {
					height: this.winHeight + 'px'
				}
			}
		},
		onUnload() {
			clearInterval(this.timer)
		},
		methods: {
			goBack(){
				  uni.switchTab({
						url: "/pages/media/media",
										
					})

			},
			// 获取直播列表
			getLivesListAjax(add) {
				this.livesList.list = this.lives
				if (add) {} else {
					this.$nextTick(() => {
						// this.$refs.livesList.refreshSuccess({
						// 	list: this.livesList.list,
						// 	total: 0
						// })
					})
				}
			},
			getAnother() {
				uni.$u.post('/app/anchor/anchorList', {
					pageNum: 1,
					pageSize: 9999
				}).then(res => {
					this.lives = res.data.records.filter(f => f.liveStatus)
					this.getLivesListAjax()
				})
			},
			//加载更多
			loadMore() {},
			//刷新
			refresh() {
				this.livesList.data.pageNum = 1
				this.getAnother()
			},
			scroll(e) {
				const fn = () => {
					this.scrollTimer = setTimeout(() => {
						console.log(this.livesBoxHeight);
						const scrollTop = e.detail.scrollTop;
						this.cardIndex = Math.ceil(scrollTop / (this.livesBoxHeight + 100));
						console.log(this.cardIndex, 'cardIndex');
					}, 100)
				}
				if (this.scrollTimer) {
					this.scrollTimer = clearTimeout(this.scrollTimer)
				}
				fn()
			},
			getAnchorLiveListAjax() {
				uni.$u.post('/app/anchor/lives/room/getAnchorLivesRoom', this.livesList.data).then(res => {
					console.log(res);
					const data1 = uni.publicJS.tryGet(() => res.data.records[1])
					const data2 = uni.publicJS.tryGet(() => res.data.records[0])
					const data = data1 || data2
					this.livesList.list = res.data.records
					this.livesList.isGet = true
					this.$nextTick(() => {
						setTimeout(() => {
							if (res.data.records.length) {
								const query = uni.createSelectorQuery().in(this)
								query.select('#item0').boundingClientRect(data => {
									this.livesBoxHeight = data.height
									console.log(this.livesBoxHeight, data);
								}).exec()
							}
						}, 50)
					})
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.lives-list-page {
		background-color: #fff;
		flex: 1;
		height: 0;
		.lives-list{
			display: flex;
			flex-wrap: wrap;
			.item{
				flex: 0.5;
				display:flex;
				justify-content: center;
			}
		}
		.lives-header {
			flex-direction: row;
			align-items: center;
			padding: 0 32rpx;

			.back-icon {
				width: 100rpx;
				height: 100rpx;
				border: 2rpx solid rgb(232, 230, 234);
				border-radius: 30rpx;
				justify-content: center;
				align-items: center;

				.back-img {
					width: 80rpx;
					height: 80rpx;
					// background-color: pink;
				}
			}

			.right-icon {
				width: 100rpx;
				height: 100rpx;
			}

			.title {
				flex: 1;
				text-align: center !important;
			}
		}

		.scroll-view {
			height: 100%;
			flex: 1;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			padding-top: 400rpx;
			text-align: center;
		}
	}
</style>